<template>
  <div class="navbar">
    <div id="statusBar" :style="{height:statusBarHeight+'px'}"></div>
    <van-nav-bar
        :title="title"
        :left-text="isIndex?'':'返回'"
        :left-arrow="!isIndex"
        @click-left="onClickLeft"
        placeholder
    />
  </div>
</template>

<script>
import Vue from 'vue';
import { NavBar } from 'vant';
Vue.use(NavBar);

export default {
  name: "NavBar",
  props:{
    title:{
      type:String,
      default:"以乐之名"
    },
    isVueRouter:{
      type:Boolean,
      default: false
    }
  },
  data(){
    return{
      isIndex:true,
      statusBarHeight:20
    }
  },
  methods:{
    onClickLeft(){
      if (!this.isVueRouter)
      {
        if (!this.isIndex){
          MiniApp.navigateBack({
            delta:1
          })
        }
      }else{
        this.$router.back()
      }
    }
  },
  mounted(){
    let pageName=this.$route.matched[0].name
    let res=MiniApp.getSystemInfoSync()
    this.statusBarHeight=res.statusBarHeight-5

    if (pageName=="index"){
      this.isIndex=true
    }else{
      this.isIndex=false
    }
  }
}
</script>

<style scoped>
#statusBar{
  background: black;
}
</style>